
<div class="layuimini-container layuimini-page-anim" style="height: calc(100% - 60px);">
    <div class="layuimini-main">

	 <fieldset class="table-search-fieldset" >
            <legend>搜索端口</legend>
            <div style="margin-bottom:5px">
                <form class="layui-form layui-form-pane" id="sform" >
                        <div class="layui-inline">
                            <label class="layui-form-label">指令名称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="cmd_name" autocomplete="off" class="layui-input">
                            </div>
                        </div>
						<div class="layui-inline">
                            <label class="layui-form-label">设备地址</label>
                            <div class="layui-input-inline">
                                <input type="text" name="slaveid" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <!--<div class="layui-inline">
                            <label class="layui-form-label">型号</label>
                            <div class="layui-input-inline">
                                <input type="text" name="model" autocomplete="off" class="layui-input">
                            </div>
                        </div>-->
                        <div class="layui-inline">
                            <label class="layui-form-label">指令描述</label>
                            <div class="layui-input-inline">
                                <input type="text" name="desc" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button type="submit" class="layui-btn layui-btn-primary layui-btn-sm"  lay-submit id="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                        </div>
                </form>
            </div>
        </fieldset>

        <table class="layui-hide" id="currentTableId"  lay-filter="currentTableFilter"></table>
    </div>
    
</div>
<script>
    layui.use(['form', 'table', 'miniPage', 'util', "layer"], function() {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            miniPage = layui.miniPage,
            util = layui.util,
            ws,
            timer,
            addTime = false;
			showHexadecimal = false;

			$.ajax({
				url: '/xapi/ports',
				type: "GET",
				success: function(data) { 
					var ports = [];  
					for (var key in data) {
						ports.push(data[key]);
					}
					setTable(ports);
				},
				error: function() {
					setTable();
				},
			});

        function setTable(data = []) {
            table.render({
                elem: '#currentTableId',
                data: data,
                defaultToolbar: ['filter', 'exports', 'print', {
                    title: '提示',
                    layEvent: 'LAYTABLE_TIPS',
                    icon: 'layui-icon-tips'
                }],
                cols: [
                    [  
					 { type: 'numbers', title: '序号', width: 40, fixed: 'left' },//序号列
					 {
                        field: 'name',
                        width: 200,
                        title: '端口名称',
                    },	{
                        field: 'type',
                        width: 200,
                        title: '类型'
                    }, {
                        field: 'address',
                        width: 200,
						templet:function (dat){
							return dat["opts"]["address"];
						},
                        title: '设备',
                    }, {
                        field: 'baudRate',
						templet:function (dat){
							return dat["opts"]["baudRate"];
						},
                        width: 200,
                        title: '波特率',
                    }/*, {
                        field: 'receive',
                        width: 200,
                        title: '接收字节'
                    }, {
                        field: 'send',
                        title: '发送字节',
                        width: 200
                    }*/, {
                        field: 'booton',
                        minWidth: 200,
						templet:function (dat){
							if ( dat["booton"] ==true ){
								return "是";
							}else{
								return "否";
							};
						},
                        title: '自动开启',
                    }]
                ],
                limits: [10, 15, 20, 25, 50, 100],
                limit: 15,
                page: false,
                skin: 'line'
            });
        }
        table.on('row(currentTableFilter)', function(e) {
            var data = e.data;
            $('.layui-select-title .layui-unselect').attr("readonly", false);
            var windowUrl = "";
			if(data["type"]=="232"){
				windowUrl = "/tools/port232.html";
			}else if(data["type"]=="TTL"){
				windowUrl = "/tools/port232.html";
			}else if(data["type"]=="485"){
				windowUrl = "/tools/port232.html";
			}else if(data["type"]=="can"){
				windowUrl = "/page/port/portcan.html";
			}
            window.open(windowUrl+"?name="+data["name"]+"&_="+(new Date()).getTime(), "_blank");
        });

		 // 监听搜索操作
		$("#data-search-btn").click(function(obj){
			var serchkeys=$("#sform").serializeArray();
 			//console.log(serchkeys);
			var newdata = tdata.filter(function(p){
					var rc=0;
					for (var i=0;i<serchkeys.length;i++){
						if (serchkeys[i]["value"]!="" ){
							return p[serchkeys[i]["name"]].indexOf( serchkeys[i]["value"])>-1;
						}else{
							rc++;
						}
					}
					if (rc==serchkeys.length){
						return p;
					}
			});
            table.reload('currentTableId', {
				data:newdata,
				page: {
                    curr: 1
                }            
            });
            return false;
        });


        $("i[lay-filter='return']").click(function() {
            $(".editor-area").hide();
            ws.close();
            $("button[lay-event='stop']").hide();
            $("button[lay-event='send']").show();
            $('input[name="sendbytes"]').attr("readonly", false);
            $('input[name="ms"]').attr("readonly", false);
            $(".input-disabled").removeClass("layui-disabled");
            $("select").removeAttr("disabled", "disabled");
            $("button[lay-event='closeport']").hide();
            $("button[lay-event='openport']").show();
            $("#sendbtn").addClass("layui-btn-disabled");
            $("#sendbtn").attr("disabled", "disabled");
            clearInterval(timer)
        });
   
        function calBytesLength(val, len) {
            var str = new String(val);
            var bytesCount = 0;
            for (var i = 0, n = len; i < n; i++) {
                var c = str.charCodeAt(i);
                if ((c >= 0x0001 && c <= 0x007e) || (0xff60 <= c && c <= 0xff9f)) {
                    bytesCount += 1;
                } else {
                    bytesCount += 2;
                }
            }
            return bytesCount;
        }
    });


 
</script>